<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!--外部样式表-->
    <link rel="stylesheet" href="./style.css">
    <!--内部样式表-->
    <style>
        body{
            /*background-color: beige;*/
            /*background-image: url("https://www.baidu.com/img/bd_logo1.png?where=super");*/
            /*background-repeat: no-repeat;*/
            /*background-position: top;*/
            /*background-size: cover;*/
        }
    </style>
    <!--引入jquery-->
    <script src="./jquery-3.7.1.min.js"></script>

    <script>

        /*方法*/
        function f() {

        }
        /*提示弹框*/
        // alert("dankuang")

        var name = "18"
        var age = 18
        var flag = true

        var obj = {
            name: "wangwu",
            age: 18,
            eat: function () {
                /*控制台输出*/
                console.log("123")
            },

        }
        obj.eat()

        /*数组*/
        var arr = [1,2,3]
        var array = new Array();
        array[0] = 1
        array[1] = 2
        console.log(typeof name)
        console.log(typeof age)
        console.log(typeof obj)
        console.log(typeof arr)

        console.log(name == age)
        console.log(name === age)

        console.log(JSON.stringify(obj))
        console.log(JSON.parse(JSON.stringify(obj)))

        /*文档加载完成*/
        window.onload = function () {
            var elementById = document.getElementById("h1");
            console.log(elementById)

            // 单击事件
            document.getElementById("btn").onclick = function () {
                console.log("btn")
            };
            // 隐藏p标签
            $("p").hide()
        };

        $(function () {
            // 隐藏p标签
            $("p").hide()
        //     标签选择器
            var h1 = $("#h1");
            console.log(h1)
        //     class 选择器
            var h2 = $(".h1");
            console.log(h2)
        //     标签选择器
            var p = $("p");

            // 单击事件
            $("#btn").click(function () {
                console.log("jquery")
            });
        });
        // tomcat9 包名 javax
        // tomcat10及以上 包名 jakarta
    </script>
</head>
<body>

<h1 id="h1" class="h1">标题</h1>
<h6 id="h6" class="h1">六级标题</h6>

<!--内联样式-->
<p style="color: blue">段落1</p>
<p>段落2</p>
<br>
<!--注释 ctrl+/  ctrl+shift +/-->
<!--a标签-->
<a href="http://www.baidu.com" target="_blank">a标签</a>

<!--图像 img标签-->
<!--<img src="./tu.png" alt="路径错误">-->
<b>加粗</b>
x<sup>2</sup>

<!--表格 table-->
<table border="1" cellspacing="0">
    <tr>
        <!--表头-->
        <th>序号</th>
        <th>姓名</th>
    </tr>
    <!--行-->
    <tr>
        <!--列 单元格-->
        <td>第一行，第一列</td>
        <td>第一行，第二列</td>
    </tr>
    <tr>
        <!--列 单元格-->
        <td>第二行，第一列</td>
        <td>第二行，第二列</td>
    </tr>
</table>

<!--无序列表-->
<ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Milk11</li>
</ul>
<!--有序列表-->
<ol type="I">
    <li>Coffee</li>
    <li>Milk</li>
</ol>

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>
<div>div1</div>
<div>div2</div>

<span>span1</span>
<span>span2</span>

<!--表单 form-->
<form action="#">
    <!--表单项-->
    <!--输入框-->
    账号：<input type="text" name="username"><br>
    密码：<input type="password" name="password"><br>
    性别：<input type="radio" name="sex" value="man">男
    <input type="radio" name="sex" value="men">女 <br>
    多选：<input type="checkbox" name="vehicle" value="Bike">I have a bike
    <input type="checkbox" name="vehicle" value="Car">I have a car <br>
    备注：<textarea name="status"></textarea> <br>
    下拉：<select name="city">
    <option value="xju">新疆</option>
    <option value="sichuan">四川</option>
</select>
    <br>
    <input type="submit" value="登录">
    <button id="btn">确定</button>
</form>

</body>
</html>